
<template>
   <div class="up">
   <wdf>
   </wdf>
   </div>
<div class="down">
  <div class="left"><onechart></onechart></div> 
  <div class="right"><Roolback></Roolback></div>
</div>
</template>


<script setup>
import service from '@/request';
import '../assets/css/table.css';
import onechart from '@/components/Echarts/onechart.vue';
import Roolback from '@/components/Echarts/Roolback.vue'
import Three from '@/components/Three/Three.vue';
import wdf from '@/components/Three/wdf.vue'
</script>
<style scoped>


.up{
    height: 45%; /* 视口高度 */
    display: flex; /* 容器内元素水平排列 */
}
.down {
  height: 40%; /* 视口高度 */
  display: flex; /* 容器内元素水平排列 */
}

/* 上半部分为背景色 */
.up {
 
}

.down .left {
    width: 50%;height: 375px;
  background-color: #ffffff; /* 左边区域的背景颜色 */
  border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.down .right {
  width: 50%;
}

</style> 


